Repository navigation
fix: fullscreen overlay bugs (remounts, stacking, shortcuts, scroll lock, mobile) - #28
Merged
Merged
Conversation
- Add useFullscreenOverlay hook: Esc-to-close on window (skips events already handled via defaultPrevented) and body scroll lock that saves and restores the previous overflow value; inert while closed. - SplitPanesView: drop createPortal/mounted so toggling fullscreen keeps the same element tree (panes no longer remount and lose search, scroll, collapse and undo state). A single wrapper switches to a fixed z-[45] overlay (above header z-40, below modals/toasts z-50) with role=dialog, aria-modal and an opacity-only fade (the animate-in/zoom-in classes did not exist). Below lg the overlay scrolls naturally; on lg the panes fill the viewport 50/50 and scroll internally. - SplitPanesView "f" shortcut: ignore modifier keys (stops hijacking Cmd/Ctrl+F), key repeat, IME composition, already-handled events, focus in input/textarea/select/contenteditable, and other open aria-modal dialogs. - Modal: preventDefault on Escape so one Esc closes the modal without also exiting fullscreen. - SQL designer: use the shared hook (adds Esc + scroll lock), z-50 -> z-[45], drop h-screen (100vh overflows under mobile toolbars), make the overlay scroll below lg with explicit 70dvh/80dvh rows so the export editor is not clipped (lg layout unchanged), re-fit the diagram after toggling, and use a functional state update for the toggle. - ShortcutsModal: document F (toggle fullscreen) and Esc (exit). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Bugs fixed
SplitPanesView(json, diff-checker, jwt, encoder, xml-json, yaml-json)createPortalwhile normal mode rendered inline, so React remounted both panes on every toggle. That lost search terms and matches, tree collapse state, scroll position, caret and undo history. The overlay now renders in place with the same element tree in both modes.Fhijacked ⌘F / Ctrl+F (browser find) whenever focus wasn't in a text field. It also fired on<select>, on key auto-repeat, during IME composition, and while another modal was open. All of these are now ignored.z-[100], modals and toastsz-50). Copy toasts never showed, and ⌘K focused an invisible command palette. The overlay now sits atz-[45]: above the header (z-40), below modals and toasts.Modalnow callspreventDefault()on Escape, and fullscreen ignores Escape events that were already handled.overflowto'', and could leave the page stuck after a modal restored a stalehidden. It now saves and restores the previous value, and only while fullscreen.lgthe overlay now scrolls. Onlgthe panes scroll internally instead of beingoverflow-hidden.animate-in fade-in zoom-in-95classes, which don't exist in this project, in favor of the existinganimate-fade-in.SQL Designer
8. Esc didn't exit fullscreen and the page behind kept scrolling. It now uses the same shared hook.
9.
h-screen(100vh) on afixed inset-0overlay ran under mobile browser toolbars. Removed.10. On mobile, fullscreen clipped the export editor. Rows now have explicit heights and the overlay scrolls.
11. The diagram wasn't re-fitted after toggling, so it stayed tiny in the corner or ended up off-screen. It now calls
fitViewafter the resize.Shortcuts sheet now documents
F/Escfor fullscreen.Shared logic lives in the new
src/lib/hooks/useFullscreenOverlay.ts(Esc-to-close + save/restore body scroll lock).Testing
tscis clean,eslint srchas 0 errors and no new warnings, andvitestpasses.Ftoggles fullscreen, and a synthetic ⌘F is not intercepted.🤖 Generated with Claude Code